<template>
  <div class="header-right-group">
    <el-dropdown trigger="click" class="hrg-item" @command="onCommand">
      <el-button type="primary" circle><i class="el-icon-user-solid"></i></el-button>
      <el-dropdown-menu slot="dropdown" class="dropdown-userinfo-popper">
        <el-dropdown-item command="info" disabled>{{userInfo.username}}</el-dropdown-item>
        <el-dropdown-item command="logout">{{$t('dc:退出')}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-button type="primary" @click="switchLang" circle class="hrg-item">
      <span class="switch-lang">{{this.$i18n.locale === 'zh-cn' ? 'En' : '中'}}</span>
    </el-button>
  </div>
</template>

<script>
import Api from '@/api';

export default {
  name: 'HeaderRightGroup',

  data() {
    return {
      userInfo: {
        username: '测试',
      },
    };
  },

  methods: {
    /**
     * 语言切换：zh-cn | en-us
     */
    switchLang() {
      this.$i18n.locale = this.$i18n.locale === 'zh-cn' ? 'en-us' : 'zh-cn';
    },
  },
}
</script>

<style lang="scss">
@import '@/assets/css/var.scss';

.header-right-group {
  .hrg-item {
    margin-left: $MP8;
  }

  .switch-lang {
    width: 12px;
    align: center;
    display: inline-block;
  }

  .el-button {
    background: $--color-primary;
    color: #FFFFFF;
    border-color: transparent;
  }
}
</style>
